<template>
  <div class="work-order-list">
    <CommonHeader title="生产工单选择" :is-show-back="true" class="header-top" />
    <div class="search-box">
      <div class="search-box-left" @click="showPopup = true">
        <span class="left-text">筛选</span>
        <van-icon name="filter-o" size="16px"/>
      </div>
      <div class="search-box-center">
        <el-input v-model="formData.workOrderNumber" autosize placeholder="请输入单号" size="small" clearable></el-input>
      </div>
      <div class="search-box-right">
        <el-button type="primary" size="small" @click="searchEvent">搜索</el-button>
      </div>
      <div class="inner">
        <div v-show="showPopup" class="searchInfo">
          <van-form v-model="formData" class="vantForm">
            <van-cell-group inset>
              <div class="selTest">
                <label class="labelLeft">单号</label>
                <el-input
                  v-model="formData.workOrderNumber"
                  clearable
                  placeholder="请输入"
                />
              </div>
              <div class="selTest">
                <label class="labelLeft">快捷码</label>
                <el-input
                  v-model="formData.customFieldOne"
                  clearable
                  placeholder="请输入"
                />
              </div>
            </van-cell-group>
            <div class="btnOk">
              <van-button round block reset @click="resetFilter"> 重置 </van-button>
              <van-button round block type="primary" @click="selectFilter">
                确定
              </van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
    <CommonMain>
      <template>
        <van-pull-refresh v-model="formData.vanPullRefreshing" @refresh="vanPullOnRefresh">
          <van-list v-if="contentList.length > 0" v-model="formData.vanListLoading" :finished="formData.vanListFinished" finished-text="没有更多了" @load="vanListOnLoad" :immediate-check="false">
            <listItem v-for="(item, index) in contentList" :key="index" :item-obj="item" @confirm="productWorkOrderConfirm"></listItem>
          </van-list>
          <div v-if="!formData.vanListLoading && contentList.length == 0 && !formData.vanPullRefreshing" class="no-data">暂无数据</div>
        </van-pull-refresh>
      </template>
    </CommonMain>

<!--    &lt;!&ndash; 筛选弹出层 &ndash;&gt;-->
<!--    <van-popup v-model="showPopup" position="top" :style="{ height: '30%' }">-->
<!--     -->
<!--    </van-popup>-->
  </div>
</template>

<script>
import listItem from './components/listItem.vue'
import CommonHeader from '@/components/CommonHeader/index.vue'
import CommonMain from '@/components/CommonMain/index.vue'
import { reqProductWorkOrderList } from "@/api/cj_productInventory.js";
import { Toast, Dialog } from "vant";
export default {
  components: {
    CommonHeader,
    CommonMain,
    listItem
  },
  data () {
    return {
      formData:{
        page:1,
        size:10,
        workOrderNumber:"",
        customFieldOne:"",
        vanListLoading:false,
        vanListFinished:false,
        vanPullRefreshing:false
      },
      contentList:[],
      showPopup: false, // 控制弹出层显示
    }
  },
  mounted(){
    this.vanPullOnRefresh();
  },
  watch:{
    "formData.workOrderNumber":{
      handler(newValue,oldValue){
        if(newValue.length === 0){
          this.getProductWorkOrderList();
        }
      }
    }
  },
  methods: {
    //获取生产工单列表信息
    getProductWorkOrderList(){
       return new Promise((resolve,reject) => {
          const { page,size,workOrderNumber ,customFieldOne} = this.formData;
          reqProductWorkOrderList({page,size,workOrderNumber,customFieldOne}).then(response => {
            if(response.code === 200 && response.data.content){
              if(this.formData.page > 1){
                this.contentList = this.contentList.concat(response.data.content);
              } else {
                this.contentList = response.data.content;
              }
              const { totalElements,totalPages } = response.data;
              if(totalElements <= this.contentList.length || response.data.content === 0 || response.data.content.length < this.formData.size){
                this.formData.vanListFinished = true;
              }
            }
            console.log('分页获取生产工单列表',response);
            resolve();
          },error => {
              console.log('分页获取生产工单列表',error);
              Dialog.confirm({title:'提示',message:'未获取到生产工单列表信息，请重试',confirmButtonText:"确定",cancelButtonText:"取消"});
              reject();
          })
       })
    },
    async vanListOnLoad(){
      this.formData.page  = this.formData.page + 1;
      console.log("执行上拉加载 ===>",this.formData);
      await this.getProductWorkOrderList();
      this.formData.vanListLoading = false;
    },
    //下拉刷新
    async vanPullOnRefresh(){
      this.formData.vanPullRefreshing = true;
      this.formData.page = 1;
      this.formData.size = 10;
      this.contentList = [];
      await this.getProductWorkOrderList();
      this.formData.vanPullRefreshing = false;
      this.formData.vanListLoading = false;
    },
    productWorkOrderConfirm(orderInfo){
      const workOrderNumber = orderInfo.workOrderNumber;
      const from = this.$route.query.from;
      console.log('from ===>',from);
      if(from == '/productInventory/detail'){
        this.$router.push({name:'ProductInventoryDetail',query:{ workOrderNumber: workOrderNumber,state:0}});
        this.$store.commit("cjProductInventory/SET_CACHE_RELATE_ORDERS",orderInfo.workOrderNumber);
        return;
      } else if(from == '/productInventory/add'){
        this.$store.commit("cjProductInventory/SET_RELATE_ORDERS",orderInfo.workOrderNumber);
        this.$router.push({name:"ProductInventoryAdd",params:{workOrderNumber:orderInfo.workOrderNumber}});
        return;
      }
    },
    //点击扫码
    async scanCodeEvent(){
      try {
        const res = await window.flutter_inappwebview.callHandler('qrCode');
        this.formData.workOrderNumber = res;
        this.onRefresh("search");
        console.log('调用精致提供的扫码api',res);
      } catch (error) {
        Toast({message: error.message,position: 'top'});
        console.log("调用精致提供的扫码api",error);
      }
    },
    searchEvent(){
      const code = this.formData.workOrderNumber;
      if(!code){
        Dialog.confirm({title:'提示',message:'请输入单号后搜索，下拉可刷新数据',confirmButtonText:"确定",cancelButtonText:"取消"});
        return;
      }
      this.contentList = [];
      this.vanPullOnRefresh();
    },
    selectFilter() {
      this.contentList = [];
      this.vanPullOnRefresh();
      this.showPopup = false;
    },
    // 重置筛选
    resetFilter() {
      this.formData.customFieldOne = '';
      this.formData.workOrderNumber = '';
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/common.scss';
.work-order-list {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .search-box {
    width:100%;
    height: 46px;
    padding: 10px 10px;
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    .search-box-left{
      width: 70px;
      margin-right: 10px;
      display: flex;
      font-size: 12px;
    }
    .search-box-center{
      width: 100%;
      margin-right: 10px;
    }
  }
  .van-pull-refresh {
    height: 100%;
    overflow: scroll;
    /deep/ .van-pull-refresh__track {
      // overflow: scroll;
    }
    .van-list {
      height: 100%;
      // overflow: scroll;
    }
    .no-data {
      height: 100%;
      font-size: 14px;
      display: flex;
      justify-content: center;
      color: #c7c6c6;
      padding-top: 30px;
    }
  }
}
.sure-dialog{
  border-radius: 4px;
}
.model-content{
  padding: 25px 10px 20px 26px;
  .name{
    font-size: 14px;
    color: #666666;
  }
  .value{
    font-size: 16px;
    color: #548AF1;
    margin-top: 10px;
  }
}
.shaixuan{
      width: 80px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 4px;
      color: #646566;
      font-size: 14px;
      line-height: 20px;
      cursor: pointer;
      background: #fff;
}
.searchInfo {
  position: absolute;
  top: calc(46px + 4px);
  left: 0;
  z-index: 33;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
  background-color: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  .vantForm {
    // padding: 0 15px;
    font-size: 13px;

    ::v-deep .van-field {
      line-height: 14px;
    }
    ::v-deep .van-field__label {
      color: #333333;
    }

    ::v-deep .van-button--primary {
      background: #007cff;
      border: 1px solid #007cff;
    }

    ::v-deep .van-field__control {
      text-align: right;
    }

    ::v-deep .van-button--block {
      height: 30px;
      font-size: 13px;
    }
    .btnOk {
      display: flex;
      justify-content: center;
      margin-top: 15px;
      height: 30px;

      ::v-deep .van-button--round {
        width: 118px;
        border-radius: 4px;
      }

      ::v-deep .van-button--default {
        margin-right: 10px;
        border-color: #c9c9c9;
      }
    }
    .selTest {
      display: flex;
      justify-content: space-between;
      height: 36px;
      box-sizing: border-box;
      border-bottom: 1px solid #f6f6f6;

      label {
        display: inline-block;
        width: 150px;
        text-align: center;
        font-size: 14px;
        line-height: 36px;
        color: #323232;
      }

      .labelLeft {
        text-align: left;
        padding-left: 16px;
      }

      .el-input {
        flex: 1 0 auto;
        width: 0;
      }

      ::v-deep .el-input__inner {
        height: 36px;
        line-height: 36px;
        border: none;
        border-bottom: 1px solid #f6f6f6;
        text-align: right;
      }
      ::v-deep .el-input__inner::placeholder {
        text-align: right;
      }

      ::v-deep .el-select .el-input__inner {
        text-align: right;
      }

      ::v-deep .el-select__input {
        text-align: right;
      }
    }
  }
}
</style>
